<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    省份:
    <select name="" id=""></select>
    城市:
    <select name="" id=""></select>
    区/县:
    <select name="" id=""></select>
    <script src="area.js"></script>
    <script>
        // place = {}
        // console.log(place.data);

        var sel = document.querySelectorAll("select");

        var str = "";
        place.data.forEach(function (item) {
            // console.log(item);
            str += `<option value="">${item.provname}</option>`;
        });
        // console.log(str);
        sel[0].innerHTML = str;


        sel[0].onchange = run1;
        sel[1].onchange = run2;


        run1()
        function run1() {
            // console.log(place.data[0].city);
            var str = "";
            // 默认获取第一个对象下的city数组
            // 事实 是获取第一个下拉框选中选中项的索引值
            // 根据索引值获取对应的数组
            var i = sel[0].selectedIndex; //获取下拉框选中项的索引值
            var arr = place.data[i].city;
            arr.forEach(function (item) {
                // console.log(item);
                str += `<option value="">${item.cityname}</option>`;
            });
            // console.log(str);
            sel[1].innerHTML = str;
            run2()
        }

        function run2() {
            var str = "";
            var i = sel[0].selectedIndex;
            var j = sel[1].selectedIndex;
            var arr = place.data[i].city[j].dist;
            arr.forEach(function (item) {
                // console.log(item);
                str += `<option value="">${item}</option>`;
            });
            // console.log(str);
            sel[2].innerHTML = str;
        }





    </script>
</body>

</html>